<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function fun(a,b){
				if(b.parentNode&&a.parentNode){
					b.parentNode.replaceChild(a.cloneNode(true),b);
					a.parentNode.replaceChild(b,a);
				}else{
					alert("失败")
				}
			}
			window.onload=function(){
				var city=document.getElementById('city');
				var game=document.getElementById('game');
				var a=city.getElementsByTagName('li');
				var b=game.getElementsByTagName('li');
				for(var i = 0; i<a.length; i++){
				       (function (ci){
				            a[i].onclick = function () { 
				                 fun(b[ci],a[ci]);
				            }
				             b[i].onclick = function () {
				             		fun(b[ci],a[ci]);
				             }
				       })(i);
				}	
			}
		</script>
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
			<ul id="city" name="BJ">
				<li id="bj" name="BeiJing">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
		<br /><br />
		
	</body>
</html>
